<template>
  <div class="milestone-box">
    <div class="banner container-fuild text-center" :style="{ backgroundImage: `url(${dataList.titleImg})` }">
      {{ dataList.titleContent }}
    </div>
    <div class="content-box">
      <div v-show="dataList.activitiesImg" class="imgbox">
        <img :src="dataList.activitiesImg" alt="">
      </div>
      <el-timeline style="max-width: 1200px">
        <el-timeline-item v-for="(activity, index) in dataList.activities" :key="index" :icon="activity.icon"
          :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp"
          placement="top">
          <el-card>
            <p>{{ activity.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script lang="ts" setup>
import WOW from 'wow.js'
import { ref, onMounted } from 'vue'
import axios from '../utils/axios';
const dataList = ref({});


let data = ref({
  titleImg: 'https://picx.zhimg.com/80/v2-8768be5966c69e571194c3f9f480aa7c_720w.webp?source=2c26e567',
  titleContent: '发展历程',
  activitiesImg: '',
  activities: [
    {
      content: '研发远程超声诊断协作系统',
      timestamp: '2020年',
      size: 'null',
      type: 'null',
      icon: 'null'
    },
    {
      content: '2021年试产第一台远程超声诊断协作/启动骨密度仪研发',
      timestamp: '2021年',
      size: 'large',
      type: 'primary',
      icon: 'el-icon-more'
    },
  ],
});

const activities = [
  {
    content: '研发远程超声诊断协作系统',
    timestamp: '2020年',
    // size: 'large',
    // type: 'primary',
    // icon: 'el-icon-more'
  },
  {
    content: '2021年试产第一台远程超声诊断协作/启动骨密度仪研发',
    timestamp: '2021年',
  },
  {
    content: '第-批小批量产品，进入医疗器械产品检测阶段/第一台骨密度仪试产',
    timestamp: '2022年',
  },
  {
    content: '鼎盛医疗通过医疗器械体系认证/骨密度仪进入检测阶段; 公司和华工大成立联合实验室，推动了设备的更新。',
    timestamp: '2023年',
  },
  {
    content: '产品补充检测及产品临床试验/骨密度仪进入注册阶段',
    timestamp: '2024年',
  },
  {
    content: '第一个三类医疗器械产品注册证/预计2025年9月获得骨密度仪产品注册证',
    timestamp: '2025年7月',
  },
]

const getData = async () => {
  const res = await axios.get('/gwht/gw/fzlc/getInfo');
  // console.log(res.data, 'res==');
  dataList.value = res.data;
  // console.log(dataList.value, 'getDataList==');

}

onMounted(() => {
  getData();
})
</script>

<style lang="less" scoped>
.milestone-box {


  .banner {
    color: #fff;
    font-size: 30px;
    height: 150px;
    line-height: 150px;
    /* background-image: url('../assets/img/banner_1.jpg'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    background-color: #c5c5c5;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 40px 0 60px;
  }

  .imgbox {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      border-radius: 16px;
      border: 2px solid #66afd6;
      width: 1200px;
      height: auto;
    }
  }

  @media screen and (max-width: 997px) {
    .content-box {
      width: 100vw;

      .imgbox {
        width: 90%;
      }

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>
